<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb
      separator="/"
      class="u-mb20"
    >
      <el-breadcrumb-item>
        <span
          class="c-text-high u-cursor"
          @click="back"
        >{{pageTitle}}</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item>物料审核详情</el-breadcrumb-item>
    </el-breadcrumb>

    <SectionContainer class="u-p20 u-mb40">
      <el-form label-width="160px">
        <SectionTitle class="u-mb30">内部审核信息</SectionTitle>
        <el-form-item label="审核ID">{{auditDetail.auditId}}</el-form-item>
        <el-form-item label="提交审核时间">{{auditDetail.submitTime}}</el-form-item>
        <template v-if="pageReferrer === 'other-creative-audit-finished'">
          <el-form-item label="审核时间">{{auditDetail.auditTime}}</el-form-item>
          <el-form-item label="审核人">{{auditDetail.auditBy}}</el-form-item>
          <el-form-item label="账户状态">{{auditDetail.innerStatus}}</el-form-item>
          <el-form-item
            label="拒绝原因"
            v-if="auditDetail.refuseReason"
          >{{auditDetail.refuseReason}}</el-form-item>
        </template>

        <SectionTitle class="u-pt30 u-mb30">基本信息</SectionTitle>
        <el-form-item label="账户名称">{{auditDetail.accountName}}</el-form-item>
        <el-form-item label="投放产品行业">{{auditDetail.industryType}}</el-form-item>
        <el-form-item label="推广域名">{{auditDetail.domainName}}</el-form-item>

        <SectionTitle class="u-pt30 u-mb30">创意信息</SectionTitle>
        <el-form-item label="创意ID">{{auditDetail.creativeId}}</el-form-item>
        <el-form-item label="创意名称">{{auditDetail.creativeName}}</el-form-item>
        <el-form-item label="链接类型">{{mapValue(GENERALIZE_CREATIVITY_PLATFORM, auditDetail.systemDownload)}}</el-form-item>
        <el-form-item label="投放链接">
          <a
            class="u-link"
            :href="auditDetail.targetUrl"
            target="__blank"
          >{{auditDetail.targetUrl}}</a>
        </el-form-item>
        <el-form-item
          label="标题文案"
          v-if="auditDetail.title"
        >{{auditDetail.title}}</el-form-item>
        <el-form-item
          label="描述"
          v-if="auditDetail.content"
        >{{auditDetail.content}}</el-form-item>
        <el-form-item label="创意类型">{{mapValue(GENERALIZE_CREATIVITY_TYPE, auditDetail.creativeType)}}</el-form-item>
        <el-form-item label="创意素材">
          <PreviewPicture :data="splitPreviewPicture(auditDetail.materialPath)"></PreviewPicture>
        </el-form-item>
        <el-form-item
          label="视频封面"
          v-if="auditDetail.coverPath"
        >
          <PreviewPicture :data="splitPreviewPicture(auditDetail.coverPath)"></PreviewPicture>
        </el-form-item>
        <el-form-item
          label="视频时长"
          v-if="auditDetail.videoDuration"
        >{{auditDetail.videoDuration}}</el-form-item>
        <el-form-item
          label="名称"
          v-if="auditDetail.productName"
        >{{auditDetail.productName}}</el-form-item>
        <el-form-item
          label="icon/logo"
          v-if="auditDetail.product_logo_url"
        >
          <PreviewPicture :data="splitPreviewPicture(auditDetail.product_logo_url)"></PreviewPicture>
        </el-form-item>
      </el-form>
    </SectionContainer>

    <!-- 审核拒绝 -->
    <AuditReject
      :visible.sync="auditUnpassVisible"
      :list="auditUnpassRejectList"
      @confirm="auditUnpass"
    ></AuditReject>

    <div class="u-affix-bottom u-page-handle">
      <el-button
        size="small"
        type="primary"
        @click="auditPass"
        v-if="pageReferrer === 'other-creative-audit'"
      >内部审核通过</el-button>
      <el-button
        size="small"
        type="primary"
        @click="openAuditUnpass"
        v-if="pageReferrer === 'other-creative-audit'"
      >内部审核拒绝</el-button>
      <el-button
        size="small"
        @click="back"
      >返回</el-button>
    </div>
  </div>
</template>

<script>
import SectionContainer from "@/components/section-container";
import SectionTitle from "@/components/section-title";
import PreviewPicture from "@/components/preview-picture";

import AuditReject from "../components/audit-reject";

import { mapValue } from "@/utils";
import permissionMixin from "@/mixins/permission";

import {
  fetchOtherCreativeFinishedDetail,
  fetchOtherCreativeUnfinishedDetail,
  fetchOtherCreativeAuditPass,
  fetchOtherCreativeAuditUnpass,
  fetchOtherCreativeAuditUnfinishedID
} from "@/api";
import {
  GENERALIZE_CREATIVITY_TYPE,
  GENERALIZE_CREATIVITY_PLATFORM
} from "@/assets/js/common-option";

export default {
  mixins: [permissionMixin],
  components: {
    SectionContainer,
    SectionTitle,
    PreviewPicture,
    AuditReject
  },
  data() {
    return {
      GENERALIZE_CREATIVITY_TYPE,
      GENERALIZE_CREATIVITY_PLATFORM,

      auditUnpassVisible: false,
      auditUnpassRejectList: [], // 拒绝原因

      pageReferrer: this.$route.query.referrer,
      auditDetail: {}
    };
  },
  computed: {
    pageTitle() {
      return {
        "other-creative-audit": "物料待审核",
        "other-creative-audit-finished": "物料已审核"
      }[this.pageReferrer];
    }
  },
  watch: {
    $route() {
      this.getAuditDetail();
    }
  },
  methods: {
    mapValue,

    // 拆分图片地址
    splitPreviewPicture(str) {
      if (str) {
        return str.split(",").map(item => {
          return {
            url: item
          };
        });
      }
      return [];
    },
    // 待审核详情
    fetchOtherCreativeUnfinishedDetail() {
      fetchOtherCreativeUnfinishedDetail({
        query: {
          creativeId: this.$route.query.creativeId
        }
      }).then(res => {
        this.auditDetail = res.data.data;
      });
    },
    // 已审核详情
    fetchOtherCreativeFinishedDetail() {
      fetchOtherCreativeFinishedDetail({
        query: {
          auditId: this.$route.query.auditId
        }
      }).then(res => {
        this.auditDetail = res.data.data;
      });
    },
    // 获取详情
    getAuditDetail() {
      if (this.pageReferrer === "other-creative-audit-finished") {
        this.fetchOtherCreativeFinishedDetail();
      } else {
        this.fetchOtherCreativeUnfinishedDetail();
      }
    },
    // 审核通过
    auditPass() {
      fetchOtherCreativeAuditPass({
        query: {
          creativeIds: this.$route.query.creativeId
        }
      }).then(() => {
        this.$message({
          message: "审核通过",
          duration: 1000
        });
        this.auditUnpassVisible = false;
        // 下一个
        setTimeout(() => {
          this.auditNext();
        }, 1000);
      });
    },
    // 审核拒绝
    openAuditUnpass() {
      this.auditUnpassVisible = true;
    },
    auditUnpass(reject) {
      fetchOtherCreativeAuditUnpass({
        query: {
          creativeIds: this.$route.query.creativeId,
          refuseReason: reject.join("\n")
        }
      }).then(() => {
        this.$message({
          message: "审核拒绝",
          duration: 1000
        });
        this.auditUnpassVisible = false;
        // 下一个
        setTimeout(() => {
          this.auditNext();
        }, 1000);
      });
    },
    // 获取下一个待审核物料
    auditNext() {
      fetchOtherCreativeAuditUnfinishedID().then(res => {
        if (res.data.list.length) {
          let creativeId = res.data.list[0].creativeId;
          this.$router.replace({
            path: this.$route.path,
            query: {
              ...this.$route.query,
              creativeId
            }
          });
        } else {
          this.back();
        }
      });
    },
    // 返回
    back() {
      this.$router.replace({
        name: this.$route.query.referrer,
        query: {
          ...this.$route.query.query
        }
      });
    }
  },
  created() {
    this.getAuditDetail();
  }
};
</script>